<template>
  <div class="header">
    <h1 class="logo" @click="logo">
      <!-- <img src="../../public/logo.png" alt="logo" /> -->
      考研信息交流网站
    </h1>
    <ul class="btn">
      <li><router-link to="/">首页 </router-link></li>
      <li><router-link to="/Search?type=1"> 视频</router-link></li>
      <li><router-link to="/Search?type=0">文章</router-link></li>
      <li><router-link to="/hotTopic">热门</router-link></li>
      <li><router-link to="/Rescource">资源下载</router-link></li>
    </ul>
    <div class="sec">
      <el-input
        placeholder="请输入内容"
        v-model="input"
        prefix-icon="el-icon-search"
        clearable
        @change="secBtn"
      ></el-input
      ><el-button icon="el-icon-search" type="primary" @click="secBtn">搜索</el-button>
    </div>
    <div class="user">
      <div class="user_mes" v-if="userData.name">
        <div class="portrait">
          <img src="../assets/img/logo.png" alt="" />
        </div>
        <span>{{ userData.nickname }}</span>
      </div>
      <ul class="btn">
        <li class="login" v-if="userData.name == ''">
          <router-link to="/login">请登录</router-link>
        </li>
        <li><router-link to="/Mymes">消息</router-link></li>
        <li><router-link to="/Collect">收藏</router-link></li>
        <li><router-link to="/History">历史</router-link></li>
      </ul>
      <el-button class="myCenterBtn" type="warning" @click="goMycenter"
        >个人中心</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
      userData: "",
    };
  },
  mounted() {
    this.userData = JSON.parse(localStorage.getItem("token")||'{}');
  },
  name: "Header",
  methods: {
    // logo返回首页
    logo() {
      this.$router.push({ path: "/" });
    },
    // 个人中心按钮
    goMycenter() {
      if (this.userData == "{}") {
        this.$message({
          showClose: true,
          message: "请先登录！！！",
          type: "warning",
        });
      } else {
        this.$router.push({ path: "/Mycenter" });
      }
    },
    //搜索按钮
    secBtn(){
      if(this.input==''){
      this.$router.push({ path: "/Search" });

      }else{
      this.$router.push({ path: "/Search",query:{sec:this.input} });

      }
    }
  },
};
</script>

<style scoped>
.header {
  width: 100%;
  height: 70px;
  z-index: 999;
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 20px;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 5px 2px 5px #c0c4cc;
}
.logo {
  width: 200px;
  height: 100%;
  font-size: 24px;
  line-height: 60px;
  color: #66b1ff;
  cursor: pointer;
}
.btn {
  display: flex;
  padding: 20px 10px;
  color: #606266;
}
.btn > li {
  margin: 0 15px;
  cursor: pointer;
  transition: 0.3s;
}
.btn > li:hover {
  border-bottom: 3px solid #409eff;
}
.btn > li:hover a {
  color: #409eff;
}
.sec {
  width: 22%;
  padding: 15px 10px;
  display: flex;
  justify-content: space-around;
}
.user {
  display: flex;
  margin-left: 20px;
}
.user_mes {
  display: flex;
}
.user_mes span {
  padding: 20px 0;
  cursor: pointer;
}
.portrait {
  width: 50px;
  height: 50px;
  cursor: pointer;
  margin: 10px;
  border-radius: 50%;
}
.myCenterBtn {
  height: 40px;
  margin: 10px;
}
.login a {
  color: #f56c6c;
}
</style>
